<template>
	<view class="page" :style="{'padding-top':mt+'px'}">
		<c-nav-bar :title="titleOrder" ></c-nav-bar>
		<view class="topInfo">
			<view class="name">{{list.name}}</view>
			<view class="spotDetail">
				<text class="planDesc" @click="()=>{
					this.planDescShow=true
				}">{{list.planDesc}}</text>
				<text>预订日期：{{bookTime}}</text>
				<text>导游名称：{{list.guideName}}</text>
			</view>
			<u-modal @confirm='()=>{
				this.planDescShow=false
			}' @close='()=>{
				this.planDescShow=false
			}' :closeOnClickOverlay="true" :show="planDescShow" title="详情" :content='list.planDesc'></u-modal>
		</view>
		<view class="warning">
			订单确认成功后，取消订单请联系旅行社！
		</view>
		<view class="operate">
			<view class="book">
				<!-- 选择日期 -->
				<view class="tit">选择日期</view>
				<view class="date">
					<view :class="['item',index==currentDate?'itemSelected':'']" v-for="(item,index) in dateArr"
						:key="index" @click="handleDate(item,index)">
						<text>{{weeks[item.week]}}</text>
						<text>{{item.time}}</text>
					</view>
					<view class="item_more" style="background: #F8F8F8;" @click='getMoreDate()'>
						<text>更多</text><text>日期</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 出行信息 -->
		<view :border="false" class="userInfo">
			<view class="title">
				出行信息
			</view>
			<u--form labelPosition="left" :model="userInfo">
				<u-form-item label="联系人" prop="name" labelWidth='200px'>
					<u--input inputAlign='right' placeholder-style="font-size:14px;text-align:right"
						v-model="fromData.linkName" border="none" placeholder='请输入联系人'></u--input>
				</u-form-item>
				<u-form-item label="联系手机" prop="phone" labelWidth='200px'>
					<u--input inputAlign='right' placeholder-style="font-size:14px;text-align:right"
						v-model="fromData.linkPhone" border="none" placeholder='请输入联系手机'></u--input>
				</u-form-item>
				<u-form-item label="出行人数" prop="number" labelWidth='200px'>
					<u--input inputAlign='right' placeholder-style="font-size:14px;text-align:right"
						v-model="fromData.personNum" border="none" placeholder='请输入出行人数'></u--input>
				</u-form-item>
			</u--form>
		</view>
		<!-- 提交栏 -->
		<view class="operation">
			<view class="left">
				<text>合计</text>
				<text>￥</text>
				<text>{{list.serveAmount}}</text>
			</view>
			<view class="right">
				<text @click="btnSail" style="margin-right: 45rpx;">立即预订</text>
			</view>
		</view>
		<!-- <u-calendar @close="timeShow=false" @confirm="confirm" :show="timeShow" mode="single" ref="calendar"
			rowHeight='110' :formatter="formatter">
		</u-calendar> -->
		<wu-calendar :selected="selected" ref="calendar" @confirm="calendarConfirm" :insert="false"></wu-calendar>
		<!-- 支付页面 -->
		<u-popup :show="payShow" @close="payShow=false">
			<view class="details details_pay" style="padding: 40rpx 30rpx 76rpx;">
				<view class="title">
					<text>请选择</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="payShow=false"></image>
				</view>
				<view class="wechat_pay">
					<view class="wp_left">
						<image src="@/static/index/steamerTicket/img_pay.jpg" mode=""></image>
						<text>微信支付</text>
					</view>
					<image src="@/static/index/steamerTicket/img_selected.jpg" mode=""></image>
				</view>
				<view class="pay_submit" @tap="toPay" style="margin-top: 271rpx;">确定</view>
			</view>
		</u-popup>
	</view>

</template>
<script>
	import debounce from 'debounce'
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleOrder:'订单填写',
				bookTime: '',
				planDescShow: false,
				unAvailableDays1: [],
				unAvailableMonth1: [],
				payShow: false,
				orderCode: '',
				show: false,
				cardCfg: this.$uct.typeToText,
				typeCfg:{1:'成人票',2:'儿童票',3:'免票儿童',4:'老人票'},
				addShow: false,
				currentDate: null,
				value: 1,
				tel: "",
				date: [1, 2, 3],
				addPersonShow: false,
				checkedper: [],
				addList: [],
				feeShow: false,
				list: {
					ticketName: '' || '六合朝阳景区'
				},

				fromData: {
					"sail": {
						"ticketId": 0,
						"discountAmount": 0,
						"linkMobile": "",
						"linkName": "",
						"num": 1,
						"orderAmount": 0,
						"realityPay": 0,
					},
					"sailTicket": [],
				},
				rouList: {},
				options: [{
					text: '删除'
				}],
				passengerList: [],
				payShow: false,
				lsKey: '',
				weeks: ['周日', '周一 ', '周二', '周三', '周四', '周五', '周六'],
				dateArr: [],
				currentTime: null,
				timeShow: false,
				currentYear: '',
				checkTime: '',
				userInfo: {},
				unAvailableMonth: [12, 1, 2, 3],
				unAvailableDays: [21, 28],
				// 指定三个日期的自定义文案 昨天、后两天、后五天的自定义文案
				// 除了变量声明，函数 计算属性方式只要返回格式正确都可以使用自定义文案
				selected: [{
						date: '2023-12-19',
						info: '已售罄',
						disable: true // 禁用
					},
					{
						date: '2023-12-22',
						info: '已售罄',
						disable: true // 禁用
					},
					{
						date: '2023-12-25',
						info: '已售罄',
						disable: true // 禁用
					},
					{
						date: '2024-1-20',
						info: '已售罄',
						disable: true // 禁用
					},
				]
			}
		},
		onReady() {

		},
		onLoad(option) {
			const array = JSON.parse(decodeURIComponent(option.item ? option.item : '{}'));
			this.getTime()
			this.currentTime = this.getDay(0);
			this.list = array
			console.log(this.list, 'list');
			this.fromData.routeId = array.id
			this.fromData.sail.realityPay = array.realPrice
			this.getGuideAvailableDate()
		},
		mounted() {},

		methods: {
			calendarConfirm(e) {
				this.checkTime = e.fulldate
				this.bookTime = e.fulldate
				const params = e.fulldate.slice(5)

				this.dateArr.forEach((item, index) => {
					if (item.time == params) {
						this.currentDate = index
					}

				})
			},
			handleAvaliableDate(date) {
				let values = Object.values(date)
				for (let d = 0; d < values.length; d++) {
					values[d].forEach((item, index) => {
						this.selected.push({
							date: item.substring(0, 10),
							info: '已售罄',
							disable: true // 禁用
						})
					})
				}
			},
			getGuideAvailableDate() {
				this.$api.post('/api/guide/checkSoldOut', {
					guideId: this.list.guideId,
				}).then(res => {
					console.log(res);
					if (res.data.code == 0) {
						this.handleAvaliableDate(res.data.data)
					} else {
						uni.showToast({
							title: res.data.mag
						})
					}
				})
			},


			// 计算总价
			dealTotalPrice() {
				this.fromData.sailTicket.forEach((d, i) => {
					if (d.personType == 1) {
						if (d.discounts && d.discounts == 1) { //优惠

						}
						this.price += (+this.item.cangInfo.totalPrice);
					}
					if (d.personType == 2) {
						if (d.discounts && d.discounts == 1) { //优惠

						}
						this.price += (+this.item.cangInfo.halfPrice);
					}
				})
				let cnum = this.fromData.sailTicket.filter(d => d.personType == 1).length;
				let ernum = this.fromData.sailTicket.filter(d => d.personType == 2).length;
				this.mxList = [{
						type: '成人票',
						price: this.item.cangInfo.totalPrice,
						num: cnum
					},
					{
						type: '儿童票',
						price: this.item.cangInfo.halfPrice,
						num: ernum
					},
				];
			},
			confirmAdd() {
				this.addShow = false;
				this.fromData.sailTicket = this.addList.filter(d => d.isSelect == true);
				this.fromData.sailTicket.forEach((d, i) => {
					this.$set(this.fromData.sailTicket[i], 'childs', 0);
					this.$api.get('/api/commonPerson/list', {
						credentialType: d.cardType,
						credentialNum: d.card
					}).then(res => {
						if (res.data.code === 0) {
							this.$set(this.fromData.sailTicket[i], 'discounts', res.data
								.data); //discounts是否有优惠 1是 0否
						} else this.$showModal(res.data.msg);
					})
				})
				this.addList.forEach((d, i) => {
					this.$set(this.addList[i], 'isSelect', false)
				})
				// this.dealTotalPrice();
				this.name = this.fromData.sailTicket[0].name;
				this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
				this.fromData.sailTicket.map(i => {
					i.realName = i.name
					i.idCode = i.card
				})
				// console.log(this.fromData.sailTicket, 'this.fromData.sailTicketthis.fromData.sailTicket');
			},
			getTime() {
				let dateArr = [];
				for (let i = 0; i < 4; i++) {
					let date = this.getDay(i);
					dateArr.push(date)
				}
				this.dateArr = dateArr;
				console.log(this.dateArr, 'this.dateArr');
			},
			getDay(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
				var tYear = today.getFullYear();
				this.currentYear = tYear;
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				let json = {
					time: tMonth + "-" + tDate,
					week: week,
					price: this.fromData.sail.realityPay || 0.01,
				}
				return json
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			selectPerson(index) {
				this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
			},
			deletePerson(item) {
				this.$api.del('/api/commonPerson', [item.id]).then(res => {
					if (res.data.code === 0) {
						this.addList.forEach((d, i) => {
							this.$refs['swipeAction' + i][0].closeHandler();
						})
						this.toGetPassengers();
						let fidx = this.fromData.sailTicket.findIndex(d => d.id == item.id);
						if (fidx > -1) this.fromData.sailTicket.splice(fidx, 1);
					} else this.$showModal(res.data.msg)
				})
			},
			toEdit(item, main) {
				if (main) {
					uni.navigateTo({
						url: '/pagesMy/commonInformation/add?type=ship&main=1&item=' + JSON.stringify(
							item),
						events: {
							editPassengerSuccess: data => {
								this.toGetPassengers();
							},
							editPassenger: data => {

							},
						}
					})
				} else {
					uni.navigateTo({
						url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
						events: {
							editPassengerSuccess: data => {
								this.toGetPassengers();
							}
						}
					})
				}

			},
			toGetPassengers(callback) {
				this.$api.get('/api/commonPerson/list', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res => {
					if (res.data.code === 0) {
						this.addList = this.$uct.setPersonType(res.data.data);
						this.addList.forEach((d, i) => {
							this.$set(this.addList[i], 'isSelect', false);
						})
						callback && callback()
					} else this.$showModal(res.data.msg);
				})
			},
			handleDate(item, index) {
				this.currentDate = index
				this.checkTime = item.time
				const year = new Date().getFullYear()

				this.bookTime = year + '-' + this.checkTime

			},
			getMoreDate() {
				this.$refs.calendar.open()
				this.timeShow = true
				this.currentDate = null
				this.checkTime = ''
			},
			toHref(url) {
				// /pagesTrip/scenicSpots/orderList  订单页面
				uni.navigateTo({
					url: url
				})
			},
			confirmAddper(confirmAddper) {
				// console.log(confirmAddper, '01010101');
				// console.log(this.checkedper[confirmAddper], '02202')
				// this.sailTicket[]
				this.close()
			},
			close() {
				this.$set(this, 'addPersonShow', false);
			},
			close2() {
				this.$set(this, 'feeShow', false);
			},
			minus(index) {
				this.fromData.sailTicket.splice(index, 1);
			},
			addPerson() {
				this.$login().then(res => {
					if (res === 0) {
						uni.navigateTo({
							url: '/pagesMy/commonInformation/add?type=ship',
							events: {
								addPassengerSuccess: data => {
									this.toGetPassengers();
								}
							}
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			// 提交订单
			btnSail: debounce(async function() {
				let time = "";
				if (this.currentDate == 0 || this.currentDate) {
					time = this.currentYear + '-' + this.dateArr[this.currentDate].time
				} else {
					time = this.checkTime
				}
				this.fromData.reserveDate = time
				this.fromData.openId = JSON.parse(uni.getStorageSync('userInfo')).openId
				this.fromData.guideId = this.list.guideId
				this.fromData.routeId = this.list.id
				this.$api.post('/api/guide/placeOrder', this.fromData)
					.then(res => {
						if (res.data.code == 0) {
							// uni.navigateTo({
							// 	url: "/pagesMy/order/index"
							// })
							this.orderId = res.data.data.orderCode
							// this.realityPay = res.data.data.realityPay
							this.payShow = true;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
			}, 500),
			toPay() {
				this.lsKey = 'toPay';
				this.$login().then(res => {
					if (res === 0) return this.confrimPay();
					else this.$refs['phoneNumber'].show = true;
				})
			},
			confrimPay() {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: this.orderId,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.payShow = false;
						this.$wxPay(res.data).then(result => {
							uni.reLaunch({
								url: `${'/pages/index/guide/paySuccess?orderId='+this.orderId+'&realityPay='+this.list.serveAmount}`
							})
						})
					}
				})
			},
		},
		computed: {

		},
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F5F8FA;
		height: 100vh;
		// padding-top: 130rpx;
	}

	.operate {
		margin: 20rpx 10rpx;
		border-radius: 40rpx;

	}

	.topInfo {
		height: 13%;
		padding: 35rpx 30rpx 20rpx;
		background-color: #fff;

		.spotDetail {
			display: flex;
			flex-direction: column;
			height: 80%;
			justify-content: space-around;
			color: #666666;

			.planDesc {
				white-space: normal;
				display: -webkit-box;
				/* 将元素视为弹性盒子 */
				-webkit-line-clamp: 1;
				/* 限制文本显示的行数为2行 */
				-webkit-box-orient: vertical;
				/* 设置盒子的排列方向为垂直方向 */
				overflow: hidden;
				/* 隐藏溢出的文本 */
				text-overflow: ellipsis;
				/* 使用省略号代替溢出的文本 */
			}
		}

		.name {
			font-size: 32rpx;
			color: #111;
			font-weight: 600;
		}
	}

	.warning {
		height: 61rpx;
		background: #FFF9F4;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF7D01;
		line-height: 61rpx;
		padding-left: 25rpx;
	}


	.operation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		background-color: #fff;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);

		.left {
			color: #FF4141;
			margin-top: -28rpx;
			font-size: 24rpx;
			position: relative;

			text {
				vertical-align: middle;
			}

			text:nth-child(1) {
				color: #666;
				margin-right: 16rpx;
			}

			text:nth-child(3) {
				font-size: 48rpx;
			}

			text:nth-child(4) {
				position: absolute;
				font-size: 24rpx;
				color: #AAA;
				bottom: -16rpx;
				left: 0;
			}
		}

		.right {
			display: flex;
			min-width: 200rpx;

			text {
				width: 220rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				margin-left: 24rpx;
				font-size: 32rpx;
				background-image: #007A69;
			}
		}

	}



	.addPerson {
		height: 64rpx;
		border: 1rpx dashed #01B9F9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.chekedPerson {
		display: block;
		width: 100%;
		margin-top: 40rpx;

		.title {
			margin-left: 12rpx;

			.index {
				font-size: 30rpx;
				font-weight: 600;
				margin-right: 40rpx;
				color: #333;
			}

			.top {
				margin-bottom: 8rpx;

				text {
					&:nth-child(2) {
						background-color: #EEF0F5;
						border-radius: 8rpx;
						color: #94A9C8;
						font-size: 24rpx;
						padding: 2rpx 12rpx;
					}
				}
			}

			.bottom {
				text {
					color: #AAA;
					font-size: 24rpx;
				}
			}
		}

	}

	.userInfo {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 40rpx 24rpx 47rpx;

		.title {
			font-size: 32rpx;
			color: #111;
			margin-bottom: 32rpx;
			font-weight: 700;
		}

		text {
			font-size: 24rpx;

			margin-left: 20rpx;
		}

		&_info {
			display: flex;
			justify-content: space-between;
			width: 500rpx;
		}
	}

	.book {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 40rpx 24rpx 47rpx;

		.tit {
			font-weight: 600;
			font-size: 32rpx;
			color: #111;
			margin-bottom: 32rpx;

			text {
				font-size: 24rpx;
				color: #999;
				margin-left: 20rpx;
			}
		}



		.date {
			display: grid;
			grid-template-columns: auto auto auto auto auto;
			gap: 20rpx;

			.item {
				padding: 7rpx 0;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;
				border: 1px solid #e5e5e5;

				text {
					display: block;
					color: #333;

					&:nth-child(1) {
						color: #777777;
					}

					&:nth-child(2) {
						margin: 8rpx 0;
					}

					&:nth-child(3) {}
				}

				&:last-child {
					text {
						color: #777777;
					}

				}
			}

			.item_more {
				padding: 7rpx 0;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;

				text {
					display: block;
					color: #333;
					font-weight: 700;

					&:nth-child(2) {
						margin: 8rpx 0;
					}

					&:nth-child(1) {
						margin-top: 5rpx;
					}


				}

				&:last-child {
					text {
						color: #777777;
					}

				}
			}

			.itemSelected {
				background: linear-gradient(90deg, #0EBFFE 0%, #00D3E8 100%);
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;

				text {
					display: block;
					color: #FFFFFF;

					&:nth-child(2) {
						margin: 8rpx 0;
						color: #FFFFFF;
					}

					&:nth-child(1) {
						color: #FFFFFF;
					}

					&:nth-child(3) {
						color: #FFFFFF;
					}
				}

				&:last-child {

					color: #FFFFFF;
				}
			}
		}
	}

	.details {
		padding: 40rpx 30rpx 200rpx;


		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.d_middle {
			padding: 40rpx 0 150rpx;

			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;

				&:first-child {
					border-bottom: 1rpx solid #EFEFEF;
				}

				&>text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				&>view {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
						margin-left: 10rpx;
					}
				}
			}
		}

		&.details_pay {
			background: #F6F6F6;

			.wechat_pay {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 83rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 41rpx 24rpx;

				.wp_left {
					display: flex;
					align-items: center;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					text {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 24rpx;
					}
				}

				&>image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.pay_submit {
				margin-top: 59rpx;
				height: 92rpx;
				background: #007A69;
				border-radius: 46rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}
}
</style>